<template>
    <div class="container">
        <n-card>
            <n-space>
                <img class="avatar" src="../../assets/images/introduction/logo.jpg" />
                <n-space vertical>
                    <div class="flex-last">
                        <n-icon :size="28" color="#4090EF">
                            <PersonCircleSharp />
                        </n-icon>
                        <p>白盐浊泉</p>
                    </div>
                    <div class="flex-last">
                        <n-icon :size="28" color="green">
                            <LogoWechat />
                        </n-icon>
                        <p>13177055985</p>
                    </div>
                    <div class="flex-last">
                        <n-icon :size="28" color="#D7D7D7">
                            <Newspaper />
                        </n-icon>
                        <p>感谢支持第五人格ASG赛事bp软件</p>
                    </div>
                </n-space>
            </n-space>
        </n-card>
        <n-card style="margin:2em 0">
            <div class="intro_section">
                <div class="left_container">
                    <h2>赞助渠道</h2>
                    <p class="intro_text">
                        第五人格ASG赛事bp软件<span class="tag">完全免费</span>。维护这样一个庞大的BP系统和为项目开发新功能所需的巨大努力，只有在我们的赞助者慷慨的财务支持下才得以持续。
                    </p>
                    <p class="intro_text">
                        来自使用ASG赛事bp软件的第五人格用户们，如果您对赞助、软件使用或者ASG赛事有疑问，请联系 <span class="tag">793651012@qq.com。</span>
                    </p>
                    <p class="intro_text">
                        如果您是个人用户，并且享受到了 <span class="tag">软件</span> 带给您的导播动力，请考虑捐赠以示感谢——就当是偶尔请我们喝杯咖啡，我们团队的开发人员将表示感谢！
                    </p>
                </div>
                <div class="right_container">
                    <img src="../../assets/images/wechatCode.png">
                    <p>扫码赞助，请留下您的备注！</p>
                </div>
            </div>
        </n-card>
        <n-alert title="提示" type="info">
            <p class="intro_text">当然，如果您想赞助ASG赛事，请联系上述微信号：<span class="tag">13177055985</span>
            ，ASG官网会登记赞助者的信息，感谢您的支持！</p>
        </n-alert>
    </div>

</template>

<script setup lang='ts' name="Intro">
import { PersonCircleSharp, LogoWechat, Newspaper } from '@vicons/ionicons5'
</script>
<style scoped lang='scss'>
.container {
    padding: 1em;

    .flex-last {
        display: flex;
        align-items: center;
        height: 30px;
        gap: 0.3em;
        font-size: 22px;
    }

    .avatar {
        height: 120px;
        width: 120px;
    }
}


.intro_text {
    text-indent: 2em;
    margin-bottom: 1em;

    .tag {
        color: $theme-color;
        font-weight: bold;
    }
}

.intro_section {
    display: flex;
    justify-content: center;
    gap: 20px;

    .left_container {
        width: 60%;


    }

    .right_container {
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2em;

        img {
            width: 80%;
            height: auto;
        }
    }
}
</style>